/*=========================================
WHY CHOOSE US
=========================================*/

.why-choose{

    padding:40px 0;

    background:var(--color-background);

}

/*=========================================
HEADING
=========================================*/

.why-choose .section-heading{

    max-width:800px;

    margin:0 auto 70px;

    text-align:center;

}

.why-choose .section-heading h2{

    margin:20px 0;

}

.why-choose .section-heading p{

    max-width:650px;

    margin:auto;

}

/*=========================================
GRID
=========================================*/

.why-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

/*=========================================
CARD
=========================================*/

.why-card{

    background:var(--color-surface);

    border:1px solid var(--color-border);

    border-radius:25px;

    padding:45px;

    transition:.4s ease;

}

.why-card:hover{

    transform:translateY(-10px);

    border-color:var(--color-primary);

    box-shadow:0 25px 60px rgba(199,154,121,.18);

}

/*=========================================
ICON
=========================================*/

.why-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    background:rgba(199,154,121,.12);

    color:var(--color-primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:25px;

}

/*=========================================
TITLE
=========================================*/

.why-card h3{

    margin-bottom:18px;

    font-size:2rem;

}

/*=========================================
TEXT
=========================================*/

.why-card p{

    color:rgba(255,255,255,.75);

    line-height:1.9;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:900px){

    .why-grid{

        grid-template-columns:1fr;

    }

}ok ons werk op my why choose us css